{{ if site.Params.stickyNav }}
<nav x-data="{ isSticky: false }"
  x-init="window.addEventListener('scroll', () => { isSticky = window.scrollY > 30 })"
  class="sticky top-0 z-30 mt-4 lg:mt-8 py-4"
  :class="{ 'bg-base-100 shadow-lg dark:border-b dark:border-base-content/30': isSticky }">
{{ else }}
<nav class="mt-4 lg:mt-8 py-4">
{{ end }}
  {{ if site.Params.zenMode }}
  <div class="container flex justify-between max-w-[65ch] mx-auto px-4 md:px-0">
  {{ else }}
  <div class="container flex justify-between px-4">
  {{ end }}
    <section class="flex items-center gap-4">
      <div class="avatar cursor-pointer hover:online" @click="flip = !flip" title="{{ T "flip" }}">
        <div class="h-10 rounded-full">
          <img src="{{ site.Params.avatar | relURL }}" alt="{{ site.Params.headerTitle }}" />
        </div>
      </div>

      {{ if or site.Params.headerTitle site.Params.motto }}
      <div>
        {{ if site.Params.headerTitle }}
        <a href="{{ site.BaseURL }}" class="text-lg font-semibold cursor-pointer">
          {{ site.Params.headerTitle }}
        </a>
        {{ end }}
        {{ if site.Params.motto }}
        <div class="text-base-content/60 text-sm">{{ site.Params.motto }}</div>
        {{ end }}
      </div>
      {{ end }}
    </section>

    <div class="dropdown dropdown-end sm:hidden">
      <div tabindex="0" role="button" class="btn btn-ghost btn-square" aria-label="Select an option">
        <ion-icon name="menu" class="text-2xl"></ion-icon>
      </div>
      <ul tabindex="0" class="dropdown-content menu w-36 bg-base-100 rounded-box z-[1] shadow-md">
        {{ partial "navMobileMenu.html" . }}
      </ul>
    </div>
    <section class="hidden sm:flex sm:items-center sm:gap-2 md:gap-4">
      {{ with site.GetPage "/about" }}
      {{ $aboutPages := .Resources.ByType "page" }}
      {{ if gt (len $aboutPages) 0 }}
      <div role="link" tabindex="0" class="text-sm font-semibold cursor-pointer hover:underline" @click="flip = !flip" title="{{ T "about" }}">
        {{- T "about" -}}
      </div>
      {{ end }}
      {{ end }}

      {{ $navItems := slice "search" "rss" "posts" "categories" "tags" }}
      {{ if site.Params.reorderNavItems }}
        {{ $navItems = site.Params.reorderNavItems }}
      {{ end }}

      {{ if not site.Params.collapseNavItems }}

      {{ range $navItems }}
      {{ partial "renderNavItem.html" . }}
      {{ end }}

      {{ with site.Params.navItems }}
      {{ partial "navCustomItems.html" (dict "navItems" $navItems "mobile" false) }}
      {{ end }}

      {{ else }}

      {{ $collapseNavItems := site.Params.collapseNavItems }}
      {{ $items := complement $collapseNavItems $navItems }}
      {{ range $items }}
      {{ partial "renderNavItem.html" . }}
      {{ end }}

      <div class="dropdown dropdown-end dropdown-hover">
        <div tabindex="0" role="button" class="group inline-flex items-center p-2 rounded-full cursor-pointer hover:bg-primary" aria-label="Select an option">
          <ion-icon class="group-hover:text-primary-content text-xl" name="menu"></ion-icon>
        </div>
        <ul tabindex="0" class="dropdown-content menu w-36 bg-base-100 rounded-box z-[1] shadow-xl">
          {{ range $collapseNavItems }}
          {{ partial "renderMobileNavItem.html" . }}
          {{ end }}

          {{ with site.Params.navItems }}
          {{ partial "navCustomItems.html" (dict "navItems" $navItems "mobile" true) }}
          {{ end }}
        </ul>
      </div>
      {{ end }}
    </section>
  </div>
</nav>
